<template>
	<view class="ticket-holder">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

	<view class="list" v-if="list.length" >
		<!-- <view  v-if="currentTab === 0">
			<view class="card-pack-item pr"
				:style="{ backgroundImage: `url(${assetsPath}${item.inventory === 0 ? 'dd094419c06505ea3edb73a2cfdbe59a19fb8051' : '5782fe7bf4bc88b469662fd27ab2b52642e87af0'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
				</view>
				<view >
					<navigator :url="`/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`"
							v-if="currentTab === 0" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						<view class="qrcode">
							<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator>
			
					<view @click="$emit('click')">
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #ffaa00 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">NO.{{ item.ticket_no }}</view>
						</view>
						<view class="flex-between bottom">
							<view>
								{{item.days}}次
							</view>
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
							<view class="date"  v-else>{{ item.yxq }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view  v-if="currentTab === 1">
			<view class="card-pack-item pr" v-if="item.zt == 0"
				:style="{ backgroundImage: `url(${assetsPath}${'e51fd7328fd338ffcfc33c78be69122ff7a86138'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
					
				</view>
				<view >
					
					<view class=""  style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;"></view>
					<view >
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
						</view>
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else></view>
							<view class="date"   v-if="item.is_yxq != null">{{ item.yxq }}</view>
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
						</view>
					</view>
				</view>
				
			
			</view>
			<view class="card-pack-item pr" v-if="item.zt == 1"
				:style="{ backgroundImage: `url(${assetsPath}${'9fdd5512f7b4ea94c303930e3ce0264f0f1595c5'}.png)` }" v-for="item in list" :key="item.id" >
				<view class="flex-align">
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ item.venue_name }}</view>
					
				</view>
				<view >
					
					<view class=""  style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;"></view>
					<view >
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #cecece ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="item.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ item.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ item.ticket_no }}</view>
						</view>
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else></view>
							<view class="date"   v-if="item.is_yxq != null">{{ item.yxq }}</view>
							<view class="date"   v-if="item.is_yxq == null && item.inventory == 1">长期有效</view>
						</view>
					</view>
				</view>
				
			
			</view>
		</view> -->
		
		<view  >
			<view class="" >
				<view class="cardpackitem pr" v-if="currentTab === 0" v-for="item in list" :key="item.id">
					<view class="card_bg" style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; " @click="$emit('click')">
						<view class="flex-align "  style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx" height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ item.venue_name }}</view>
						</view>
						<view v-if="item.is_yxq == null && item.inventory == 1"  style="margin-right: 20rpx;font-size: 24rpx;">
							{{ item.yxq }}
						</view>
						<view v-else style="margin-right: 20rpx;font-size: 24rpx;">
							{{ item.yxq }}
						</view>
					</view>
					
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" @click="$emit('click')">
							<view class="flex-align">
								<view class="name" style="color: #4BA677;font-size: 34rpx;font-weight: 600;">{{ item.goods_name }}</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">NO.{{ item.ticket_no }}</view>
							</view>
						</view>
						<view class=""  style="margin-top: 30rpx;margin-right: 20rpx;">
							<navigator :url="`/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票夹&choose=选择票&goods_image=${item.goods_image}`">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`" width="80rpx"
										height="80rpx"></u-image>
								</view>
							</navigator>
						</view>
					</view>
						
					<view style="margin-top: 20rpx;margin-left: 20rpx;" @click="$emit('click')">
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else></view>
						</view>
					</view>
				</view>
				
				<view class="cardpack_item pr" v-if="currentTab === 1" v-for="item in list" :key="item.id">
					<view class="card_bg" style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; ">
						<view class="flex-align "  style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx" height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ item.venue_name }}</view>
						</view>
						<view v-if="item.is_yxq == null && item.inventory == 1"  style="margin-right: 20rpx;font-size: 24rpx;">
							{{ item.yxq }}
						</view>
						<view v-else style="margin-right: 20rpx;font-size: 24rpx;">
							{{ item.yxq }}
						</view>
					</view>
					
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" >
							<view class="flex-align">
								<view class="name" style="color: #999999;font-size: 34rpx;font-weight: 600;">{{ item.goods_name }}</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">NO.<text>{{ item.ticket_no }}</text></view>
							</view>
						</view>
						<!-- <view class=""  style="margin-top: 30rpx;margin-right: 20rpx;">
							<view class="qrcode" >
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`" width="80rpx"
									height="80rpx"></u-image>
							</view>
						</view> -->
						<view class=""  style="margin-top: 30rpx;margin-right: 20rpx;" v-if="item.show_code ==true">
							<navigator :url="`/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票夹&choose=选择票&goods_image=${item.goods_image}`">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`" width="80rpx"
										height="80rpx"></u-image>
								</view>
							</navigator>
						</view>
						<view class=""  style="margin-top: 30rpx;margin-right: 20rpx;"  v-if="item.show_code ==false">
							<!-- <view>
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`" width="80rpx"
										height="80rpx"></u-image>
								</view>
							</view> -->
						</view>
					</view>
						
					<view style="margin-top: 20rpx;margin-left: 20rpx;">
						<view class="flex-between bottom">
							<view v-if="item.yxq != '长期有效'">
								{{item.days}}次
							</view>
							<view v-else></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		</view>
		<view class="" v-else style="margin-top: 50rpx;">
			<u-empty  text="暂无数据" :icon="icon1" />
		</view>
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				icon1: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
					name: "待使用"
				},
				// {
				// 	name: "待结账"
				// },
				{
					name: "已结束"
				}],
				list: [],
				listQuery: { //分页
					limit:5,
					page: 1,
				},
				totalPage:""

			};
		},
		onLoad(options) {
			this.getTicketList();
			// if (!uni.getStorageSync("openid")) {
			// 	uni.showToast({
			// 		title: '请先登录！',
			// 		icon:'none',
			// 		duration:1000
			// 	});
			// 	setTimeout(() => {
			// 		uni.navigateTo({
			// 			url:"/pages/personal/personal"
			// 		})
			// 	}, 1800)
			// } else{
			// 	let phone = uni.getStorageSync('phone')
			// 	if (!phone) {
			// 		this.showPopup = true
			// 	} else {
			// 		this.showPopup = false
			// 	}
			// }
		},
		methods: {
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await person.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					that.showPopup = false
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			},
			goQrcode(item) {
				uni.navigateTo({
					url: `/pages/personal/qrcode/qrcode?goods_name=${item.goods_name}&ticketno=${item.ticket_no}&title=我的票包&choose=选择票&goods_image=${item.goods_image}`
				})
			},
			// 日期加指定天数
			addDate(date, days) {
				let date1 = new Date(date);
				date1.setDate(date1.getDate() + days);
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				let year = date1.getFullYear();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				return year + "-" + month + "-" + day;
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.list = []
				this.listQuery.page = 1
				this.getTicketList();

			},
			// 获取票据列表
			async getTicketList() {
				let that = this;
				if (this.listQuery.page === 1) that.list = [];
				let postData = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					expired: this.currentTab,
					page: this.listQuery.page,
					limit: this.listQuery.limit,
				};
				let res = await person.getMyTicket(postData);
				if (res.code === 1) {
					// this.list = res.data.ticketData;
					this.list = this.list.concat(res.data.ticketData); //将数据拼接在一起
					that.totalPage = res.data.page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				
					if (this.totalPage <= this.listQuery.page) {
						// uni.hideLoading();
						uni.showToast({
							title: '没有更多了',
							duration: 2000,
							icon: 'none'
						});
						return
					}
					this.listQuery.page += 1;
					this.getTicketList()
				}
			
		},
	};
</script>

<style lang="scss" scoped>
	.ticket-holder {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: rgb(249, 249, 249);
		min-height: 100vh;

		/deep/.u-tabs {
			background-color: #fff;
			// border-bottom: 1px solid #e5e5e5;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 0 20rpx 20rpx 20rpx;
			
			.cardpackitem {
				color: #fff;
				// padding: 30rpx 30rpx 12rpx;
				width: 710rpx;
				height: 280rpx;
				background: linear-gradient( 180deg, rgba(194,242,217,0.5) 0%, rgba(206,255,230,0) 100%);
				border-radius: 10rpx;
				border: 1rpx solid;
				border-image: linear-gradient(180deg, rgba(75, 166, 119, 1), rgba(75, 166, 119, 0.4)) 1 1;
				margin-top: 30rpx;
				
				.card_bg{
					width: 708rpx;
					height: 80rpx;
					background: linear-gradient( 135deg, #6BD3A6 0%, #56BF89 100%), #60BF8F;
				}
			
				&+.card-pack-item {
					margin-top: 30rpx;
				}
			
				&.lapse {
			
					.bottom,
					.balance {
						color: rgb(153, 153, 153) !important;
					}
				}
			
				.number {
					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			
				.name {
					font-size: 36rpx;
				}
			
				.bottom {
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					padding-top: -20rpx !important;
			
					.balance {
						font-size: 48rpx;
						color: #333;
						margin-right: 10rpx;
						font-weight: bold;
					}
				}
			
				// .qrcode {
				// 	position: absolute;
				// 	right: 10rpx;
				// 	top: 10rpx;
				// }
			}
			.cardpack_item {
				color: #fff;
				// padding: 30rpx 30rpx 12rpx;
				width: 690rpx;
				height: 280rpx;
				background: linear-gradient( 180deg, rgba(179,179,179,0.5) 0%, rgba(255,255,255,0) 100%);
				border-radius: 10rpx;
				border: 1rpx solid;
				border-image: linear-gradient(180deg, rgba(166, 166, 166, 1), rgba(166, 166, 166, 0.4)) 1 1;
				margin-top: 30rpx;
				
				.card_bg{
					width: 688rpx;
					height: 80rpx;
					background: linear-gradient( 135deg, #BFBFBF 0%, #A6A6A6 100%), #60BF8F;
				}
			
				&+.card-pack-item {
					margin-top: 30rpx;
				}
			
				&.lapse {
			
					.bottom,
					.balance {
						color: rgb(153, 153, 153) !important;
					}
				}
			
				.number {
					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			
				.name {
					font-size: 36rpx;
				}
			
				.bottom {
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					padding-top: -20rpx !important;
			
					.balance {
						font-size: 48rpx;
						color: #333;
						margin-right: 10rpx;
						font-weight: bold;
					}
				}
			
				// .qrcode {
				// 	position: absolute;
				// 	right: 10rpx;
				// 	top: 10rpx;
				// }
			}
		}

		card-pack-item+card-pack-item {
			.card-pack-item {
				margin-top: 30rpx;
			}
		}
		
		.card-pack-item {
			color: #fff;
			width: 690rpx;
			height: 296rpx;
			padding: 18rpx 30rpx 50rpx 18rpx;
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		
			&+.card-pack-item {
				margin-top: 30rpx;
			}
		
			&.lapse {
		
				.bottom,
				.balance {
					color: #fff !important;
				}
			}
		
			.number {
				text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		
			.name {
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		
			.bottom {
				color: #fff !important;
				font-size: 28rpx;
				padding-top: 45rpx;
				.balance {
					font-size: 48rpx;
					color: #fff !important;
					margin-right: 10rpx;
					font-weight: bold;
				}
			}
		
			.qrcode {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}



		.item {
			padding: 20rpx 30rpx;
			position: relative;
			height: 290rpx;
			background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;;
			// filter: drop-shadow(0px 13rpx 57rpx rgba(8,73,162,0.11));
			border-radius: 20rpx;

			&+.item {
				margin-top: 30rpx;
			}

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 192rpx;
				border-radius: 50%;
				background-color: rgb(249, 249, 249);
				width: 30rpx;
				height: 30rpx;
				z-index: 1;
			}

			&::after {
				left: -15rpx;
			}

			&::before {
				right: -15rpx;
			}

			.line {
				top: 207rpx;
				left: 0;
				border-top: 1rpx dashed #fff;
				width: 100%;
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin: 10rpx 0;
				color: #fff;

				.ticketName {
					width: 611rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.round {
					width: 20rpx;
					height: 20rpx;
					margin-right: 11rpx;
					background:linear-gradient( 270deg, #57C08B 0%, #69D1A4 100%);
					border-radius: 50%;
				}
			}

			.minute {
				line-height: 34rpx;
				font-size: 26rpx;
				color: #fff;

				text {
					font-size: 44rpx;
				}
			}

			.expiration {
				font-size: 28rpx;
				color: #fff;
			}

			.bottom {
				font-size: 28rpx;
				margin-top: 40rpx;
				color: rgb(153, 153, 153);
			}

			.qrcode {
				right: 10rpx;
				top: 10rpx;
			}
		}


	}

	.disbled-ticket {
		// opacity: 0.6;
	}
</style>
